1import {useState, useReducer, PropsWithChildren} from 'react';
  2import {makeStyles} from '@material-ui/core/styles';
  3import {useTranslation} from 'react-i18next';
  4import EventLayout, {TabComponent} from '../../../layouts/Event';
  5import TravelColumns from '../../../containers/TravelColumns';
  6import NewTravelDialog from '../../../containers/NewTravelDialog';
  7import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
  8import {
  9  EventByUuidDocument,
 10  useFindUserVehiclesQuery,
 11} from '../../../generated/graphql';
 12import useProfile from '../../../hooks/useProfile';
 13import Fab from '../../../containers/Fab';
 14import {
 15  initializeApollo,
 16  APOLLO_STATE_PROP_NAME,
 17} from '../../../lib/apolloClient';
 18
 19interface Props {
 20  eventUUID: string;
 21}
 22
 23const Page = (props: PropsWithChildren<Props>) => {
 24  return <EventLayout {...props} Tab={TravelsTab} />;
 25};
 26
 27const TravelsTab: TabComponent = (props: {event}) => {
 28  const classes = useStyles();
 29  const {t} = useTranslation();
 30  const {user} = useProfile();
 31  const {data: {me: {profile: {vehicles = []} = {}} = {}} = {}} =
 32    useFindUserVehiclesQuery();
 33  const [openNewTravelContext, toggleNewTravel] = useState({opened: false});
 34  const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
 35
 36  const addTravelClickHandler =
 37    user && vehicles?.length != 0
 38      ? toggleVehicleChoice
 39      : () => toggleNewTravel({opened: true});
 40
 41  return (
 42    <>
 43      <TravelColumns toggle={addTravelClickHandler} />
 44      <Fab
 45        onClick={addTravelClickHandler}
 46        aria-label="add-car"
 47        color="primary"
 48        className={classes.bottomRight}
 49      >
 50        {t('travel.creation.title')}
 51      </Fab>
 52      <NewTravelDialog
 53        context={openNewTravelContext}
 54        toggle={() => toggleNewTravel({opened: false})}
 55      />
 56      <VehicleChoiceDialog
 57        open={openVehicleChoice}
 58        toggle={toggleVehicleChoice}
 59        toggleNewTravel={toggleNewTravel}
 60        vehicles={vehicles}
 61      />
 62    </>
 63  );
 64};
 65
 66const useStyles = makeStyles(theme => ({
 67  bottomRight: {
 68    bottom: 0,
 69    right: theme.spacing(6),
 70
 71    [theme.breakpoints.down('sm')]: {
 72      right: theme.spacing(1),
 73      bottom: 56,
 74    },
 75  },
 76}));
 77
 78export async function getServerSideProps(ctx) {
 79  const {uuid} = ctx.query;
 80  const {host = ''} = ctx.req.headers;
 81
 82  const apolloClient = initializeApollo();
 83  const {data: {eventByUUID: event = null} = {}} = await apolloClient.query({
 84    query: EventByUuidDocument,
 85    variables: {uuid},
 86  });
 87
 88  try {
 89    return {
 90      props: {
 91        [APOLLO_STATE_PROP_NAME]: apolloClient.cache.extract(),
 92        eventUUID: uuid,
 93        metas: {
 94          title: event?.name || '',
 95          url: `https://${host}${ctx.resolvedUrl}`,
 96        },
 97      },
 98    };
 99  } catch (error) {
100    console.error(error);
101    return {props: {}};
102  }
103}
104
105export default Page;